<script setup>
import {useRoute} from "vue-router";
import {onMounted} from "vue";
import {ElNotification} from 'element-plus'

const route = useRoute()
onMounted(() => {
  ElNotification({
    title: '🎉欢迎来到Sonic平台官网！',
    dangerouslyUseHTMLString: true,
    duration: 6000,
    message: "<span style='color: #909399'>平台持续迭代中，感谢您的关注！<br>" +
        "文档不够清晰？<a href='https://gitee.com/ZhouYixun/sonic-official-website'>点此</a> 参与建设<br>" +
        "最后编辑时间：" + editTime + "</span>",
    position: 'bottom-right',
  })
})
</script>

<template>
  <el-container direction="vertical">
    <el-header>
      <el-menu style="justify-content:flex-end;position: relative"
               :default-active="route.path"
               class="el-menu-demo"
               mode="horizontal"
               router
      >
        <img src="./assets/logo2.png" style="position: absolute;left:10px;top:5px" height="50"/>
        <el-menu-item index="/Home">首页</el-menu-item>
        <el-menu-item index="/Document">使用文档</el-menu-item>
        <el-menu-item index="/Deploy">部署文档</el-menu-item>
        <el-menu-item index="/Version">版本记录</el-menu-item>
        <el-sub-menu index="1">
          <template #title>其他</template>
          <el-menu-item index="/Option">可配置项</el-menu-item>
          <el-menu-item index="/Question">常见问题</el-menu-item>
          <el-menu-item index="/Mine">联系我</el-menu-item>
        </el-sub-menu>
        <el-menu-item><a href="https://github.com/ZhouYixun" target="_blank"><img src="./assets/github.png"
                                                                                  height="30"/></a>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

<style>
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-card * {
  color: #606266;
}

.el-tab-pane {
  padding: 0 4%;
}

.el-card {
  border-radius: 25px !important;
}

.back {
  padding: 0 10%;
}

.demo-tree-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}

.banner {
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner2 {
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

html,
body,
#app,
.el-container {
  padding: 0px;
  margin: 0 !important;
  height: 100%;
}

code {
  font-family: "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 10px;
  padding: 20px 20px;
  background-color: #303133;
}

li {
  margin: 12px 0;
}

.el-menu-item {
  margin: 0;
}

.el-timeline-item {
  margin: 0;
}

blockquote {
  border-radius: 5px;
  font: 14px/22px normal helvetica, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 30px;
  padding: 10px 10px 10px 15px;
  border-left: 3px solid #409EFF;
  background-color: #F2F6FC
}

a:link {
  color: #409EFF
}

a:visited {
  color: #409EFF
}

table {
  width: 100%;
  border-collapse: collapse;
}

table td, table th {
  border: 1px solid #C0C4CC;
  padding: 12px;
}

table th {
  background-color: #E4E7ED;
  color: #909399;
}

table tbody tr:hover > td {
  background-color: #F2F6FC !important
}
</style>
